import React, { Component, createContext } from 'react'



/* 
    上下文后代传参:
    1.创建一个上下文
    const TitleContext = createContext()
    2.使用上下文对象中的 Provider 组件 ,配合 value 属性进行值的传递
    
    <TitleContext.Provider value='卫龙'>
        <First></First>
    </TitleContext.Provider>

    3.接收参数

        3-1类组件接收:
            3-1-1:
                通过静态属性的方法来接收
                static contextType = TitleContext
            3-1-2:
                通过组件名接接收
                First.contextType = TitleContext
        
        3-2函数式组件接收:
            通过 TitleContext.Consumer 接收数据
            
            <TitleContext.Consumer>
                这里面一定要放一个函数
            </TitleContext.Consumer>

    
      
                
    4.使用数据 
    
        4-1 类组件使用方式 
        {this.context}


        4-2 函数式组件使用方式 
        {value => (<div>Section:{value}</div>)}

*/





//1.创建一个上下文
const TitleContext = createContext()


class First extends Component {
    // 3.通过静态属性进行接收
    // static contextType = TitleContext
    render() {

        return (
            <div>
                {/* 4.使用 this.context 拿到我的参数然后使用 */}
                First:{this.context.name}
                <Section></Section>
            </div>
        )
    }
}

// 3.接收参数
First.contextType = TitleContext








const Section = () => {
    return (
        <>
            <div>
                {/* 3.通过 TitleContext.Consumer 接收数据 */}
                <TitleContext.Consumer>
                    {/* 4.使用数据 */}
                    {value => (<div>Section:{value.name}</div>)}
                </TitleContext.Consumer>
            </div>
        </>
    )
}


export default class App extends Component {
    render() {
        return (
            <div>
                {/* 2.使用上下文对象中的 Provider 组件 , 配合 value 属性进行值的传递 */}
                <TitleContext.Provider value={{ name: '张一', age: 18, sex: '女' }}>
                    <First></First>
                </TitleContext.Provider>
            </div>
        )
    }
}
